<link rel="stylesheet" href="<%- Virtual_Path.Static %>main/css/activity-zt-chongguan.css"/>
<div class="chongguan-wrap">
    <div class="main-video-area">
        <div class="video-area-content">
            <div class="video-player">
                <div class="video-player" id="video_container">
                </div>
                <h2 id="video_title" class="video-title"></h2>
            </div>
            <div class="video-list">
                <h2 class="vlist-title">相关节目</h2>
                <ul class="vlist-info" id="J_VideoList">
                </ul>
            </div>
        </div>
    </div>

</div>
<style>
    .chongguan-wrap{
        background: url('<%- Virtual_Path.Static %>main/image/activity/2016/shiting/bhg.png') repeat;
        min-height:720px;
        height:720px;
    }
    .video-area-content{
        background-color: #000;
    }
    .video-area-content .video-player{
        width: 938px;
        height: 528px;
        background-color: #000;
    }
    .video-title{
        width: 958px;
        height: 58px;
        background-color: #fff;
        float: left;
        margin-top: 20px;
        line-height: 58px;
        margin-left: -10px;
        margin-right: -10px;
        font-size: 24px;
        text-indent: 10px;
    }
</style>
<script src="https://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>
<script type="text/javascript">
    var index = 0;
    function playvideo(id){
        index = id;
        play();
    }
    function play(){
        player(_PageData.Data[index]);
    }
    function player(fileData){
        window.document.location.hash = '#'+index;
        window.document.getElementById("video_title").innerHTML = fileData.title;
        new qcVideo.Player(
                "video_container",
                {"auto_play":"1","file_id":fileData.file_id,"app_id":"1252509605","width":1280,"height":720,"https":1}
        );
    }
    window.onload = function(){
        var video_index = window.location.hash;
        if(video_index != ''){
            index = Number(video_index.replace('#', ''));
            play();
        }else{
            playvideo(0);
        }
    };
    var _PageData={
        Data : [
            {file_id:"14651978969422059343",	title:"现实生活中真的有飞檐走壁的人"},
            {file_id:"14651978969422044852",	title:"女文身师遭遇变态男要求文私处"},
            {file_id:"14651978969422033853",	title:"年薪百万？90后女艺人的生活"},
            {file_id:"14651978969422015900",	title:"钢管舞女孩：我们不是色情表演者"},
            {file_id:"14651978969422015830",	title:"不可不知的道教知识"},
            {file_id:"14651978969421935858",	title:"宠物造型师：剪刀下的人生"},
            {file_id:"14651978969421990503",	title:"杨洋这皮囊注定成为国际巨星，不服来战！"},
            {file_id:"14651978969421971488",	title:"当红鲜肉性欲强，约没约炮看面相"},
            {file_id:"14651978969421983826",	title:"看面相解析王宝强离婚事件"},
            {file_id:"14651978969421983749",	title:"惊呆！宋小宝天生命犯桃花相"},
            {file_id:"14651978969421983658",	title:"除了月饼和长假，中秋节还有这些传统习俗。"},
            {file_id:"14651978969421983582",	title:"悲哀！我们的婚姻竟沦落至此"}
        ],
        Init:function(){
            this.Randerlist(_PageData.Data);
        },
        Randerlist:function(data){
            var _Html = "";
            for (var i = 0,len=data.length; i < len; i++) {
                _Html +=	'<li>'+
                        '<a href="javascript:;" onclick="playvideo('+i+')">'+data[i].title+'</a>'+
                        '</li>';
            }
            window.document.getElementById("J_VideoList").innerHTML = _Html;
        }

    }
    _PageData.Init();
</script>